<template>
  <div class="operation_box zy-content">
<!--    <div class="title"><span>{{$t('common.Statisticalparts')}}</span></div>-->
    <div class="content_box">
      <Col :span="8">
        <div class="chartWrapper">
          <div class="tip">
            <span style="  line-height: 12px; font-size:12px;">{{$t('common.Sparecategory')}}</span>
          </div>
          <div class="waperRowLeft">
              <Row class="typeBox">
                <template v-for="item in typeListinfo">
                <Col :span="8"
                     :class="[
                      { topBorder: item.topBorder },
                      { leftBorder: item.leftBorder },
                      { botBorder: item.botBorder },
                     'type_item_col']"
                     :key="item.id"
                >
                  <div class="type_item" @click="typeinfoClick(item)" v-if="!item.fillStaus">
                    <span class="type_item_title" :style="{backgroundColor:item.backColor}">{{item.title}}</span>
                    <span class="content">{{item.content}}</span>
                  </div>
                  <div class="type_item_fill" :style="{backgroundColor:item.backColor}" @click="typeinfoClick(item)"  v-else>
                    <span class="content">{{item.content}}</span>
                  </div>
                </Col>
                </template>
                <div class="box_left">
                  <span>V</span>
                  <span>E</span>
                  <span>D</span>
                </div>
                <div class="box_bot">
                  <span>A</span>
                  <span>B</span>
                  <span>C</span>
                </div>
                <div class="box_left_title">
                  <span>{{$t('spareParts.Significance')}}</span> <!-- 关键性 -->
                </div>
                <div class="box_bot_title">
                  <span>{{$t('spareParts.Economization')}}</span><!-- 经济性 -->
                </div>
              </Row>
            <Row class="typeBoxContent">
              <Col :span="12" class="content_itemBox">
               <div class="content_item">
                 <div class="content_item_title">
                   <span class="title_top">第1类</span>
                   <span class="colorBox" style="background-color: #F62217"/>
                 </div>
                 <div class="content_item_text">
                  <span>
                    第I类优先级高，此类备件要严格控制，在保证维修需要的前提下，安全储备要低，以减少资金积压和加速资金周转，进行MIN，MAX管理（MIN=SS安全库存，MAX根据预算调整）;
                  </span>
                 </div>
               </div>
              </Col>

              <Col :span="12" class="content_itemBox">
               <div class="content_item">
                 <div class="content_item_title">
                   <span class="title_top">第2类</span>
                   <span class="colorBox" style="background-color: #FDD017"/>
                 </div>
                 <div class="content_item_text">
                  <span>
                    第II类管理优先级较低，使用TWO-BIN形式进行管理；
                  </span>
                 </div>
               </div>
              </Col>


              <Col :span="12" class="content_itemBox">
               <div class="content_item">
                 <div class="content_item_title">
                   <span class="title_top">CV类</span>
                   <span class="colorBox" style="background-color: #D4A017"/>
                 </div>
                 <div class="content_item_text">
                  <span>
                   CV这一类，虽然成本低但却很重要。可以一年采购一次，然后放着保存以便管理工作，保证全年供货，避免缺货；
                  </span>
                 </div>
               </div>
              </Col>

              <Col :span="12" class="content_itemBox">
               <div class="content_item">
                 <div class="content_item_title">
                   <span class="title_top">AD类</span>
                   <span class="colorBox" style="background-color: #4EE2EC"/>
                 </div>
                 <div class="content_item_text">
                  <span>
                    AD这一类，虽然关键程度不是很高，但是它占了很大一部分库存资金，可以由供应商备库存;
                  </span>
                 </div>
               </div>
              </Col>
            </Row>
          </div>
        </div>
      </Col>
      <Col :span="16">
        <Row>
          <Col :span="12">
            <div class="chartWrapper">
              <div class="tip">
                <span class="tip_top" style="  line-height: 12px; font-size:12px;">{{$t('spareParts.Statistics')}}{{ target_type && `(${target_type})`}}</span> <!-- 数据统计 -->
                <div class="title_tip">
                  <div class="title_tip_top">
                    <span class="colorBox" :style="{backgroundColor:colorList[0]}"/>
                    <span>{{$t('spareParts.InventoryQuantity')}}</span> <!-- 库存数量 -->
                  </div>
                  <div class="title_tip_top">
                    <span class="colorBox" :style="{backgroundColor:colorList[1]}"/>
                    <span>{{$t('spareParts.usageAmount')}}</span> <!-- 使用数量 -->
                  </div>
                  <div class="title_tip_top">
                    <span class="colorBox" :style="{backgroundColor:colorList[2]}"/>
                    <span>{{$t('spareParts.ScrapQuantity')}}</span> <!-- 报废数量 -->
                  </div>
<!--                  <span>库存数量</span>-->
<!--                  <span>使用数量</span>-->
<!--                  <span>报废数量</span>-->
<!--                  <span @click="btnClick('库存数量')" :class="{'grayBtn': inventoryStatus}">-->
<!--                     库存数量-->
<!--                  </span>-->
<!--                  <span @click="btnClick('使用数量')" :class="{'grayBtn': useStatus}">-->
<!--                    使用数量-->
<!--                  </span>-->
<!--                  <span @click="btnClick('报废数量')" :class="{'grayBtn': recipientStatus}">-->
<!--                    报废数量-->
<!--                  </span>-->
                </div>
              </div>
              <div class="waperRow">
                <gaugeChart
                     ref="gaugeChart"
                     v-if="numberState && numberState.length"
                     :numberState="numberState"/>
              </div>
            </div>
          </Col>
          <Col :span="12">
            <div class="chartWrapper">
              <div class="tip">
                <span class="tip_top" style="width:100px;  line-height: 12px; font-size:12px;">{{$t('common.StatisticsbyWarehouse')}}{{ target_type && `(${target_type})`}}</span><!-- 仓库统计 -->
                <div class="title_tip">
<!--                  <template v-for="(item,i) in backupName">-->
<!--                    <div class="title_tip_top">-->
<!--                      <span class="colorBox" :style="{backgroundColor:colorList[i]}" style="font-size:12px;" />-->
<!--                      <span>{{item}}</span>-->
<!--                    </div>-->
<!--                  </template>-->
<!--                  <span @click="btnClick('CMX仓库')" :class="{'grayBtn': inventorybeStatus}">-->
<!--                     CMX仓库-->
<!--                  </span>-->
<!--                  <span @click="btnClick('CEP仓库')" :class="{'grayBtn': usebeStatus}">-->
<!--                    CEP仓库-->
<!--                  </span>-->
<!--                  <span @click="btnClick('CCA仓库')" :class="{'grayBtn': recipientbeStatus}">-->
<!--                    CCA仓库-->
<!--                  </span>-->
                </div>
              </div>
              <div class="waperRow">
                <barChart ref="barChart" v-if="backupState && backupState.length" :backupState="backupState"/>
              </div>
            </div>
          </Col>
          <Col :span="12">
            <div class="chartWrapper">
              <div class="tip" >
                <span class="tip_top" style="  line-height: 12px; font-size:12px;">{{$t('common.StatisticsbyFactory')}}{{ target_type && `(${target_type})`}}</span><!-- 使用厂区统计 -->
              </div>
              <div class="waperRow">
                <pieChart v-if="factoryState && factoryState.length" :factoryState="factoryState"/>
              </div>
            </div>
          </Col>
          <Col :span="12">
            <div class="chartWrapper">
              <div class="tip">
                <span class="tip_top" style="width:120px;  line-height: 12px; font-size:12px;">{{$t('spareParts.ItemClassificationStatistics')}}{{ target_type && `(${target_type})`}}</span><!-- 物品分类统计 -->
                <div class="title_tip">
<!--                  <template v-for="(item,i) in goodTypeName">-->
<!--                    <div class="title_tip_top">-->
<!--                      <span class="colorBox" :style="{backgroundColor:colorList[i]}"/>-->
<!--                      <span>{{item}}</span>-->
<!--                    </div>-->
<!--                  </template>-->
<!--                  <span @click="btnClick('电气类')" :class="{'grayBtn': inventoryelStatus}">-->
<!--                     电气类-->
<!--                  </span>-->
<!--                  <span @click="btnClick('机械类')" :class="{'grayBtn': useelStatus}">-->
<!--                    机械类-->
<!--                  </span>-->
<!--                  <span @click="btnClick('气动类')" :class="{'grayBtn': recipientelStatus}">-->
<!--                    气动类-->
<!--                  </span>-->
                </div>
              </div>
              <div class="waperRow">
                <linebarChart
                    v-if="goodTypeState && goodTypeState.length"
                              :goodTypeState="goodTypeState"
                    ref="linebarChart"/>
              </div>
            </div>
          </Col>
        </Row>
      </Col>
    </div>
  </div>
</template>
<script>
import gaugeChart from "./charts/gaugeChart";
import barChart from "./charts/barChart";
import linebarChart from "./charts/linebarChart";
import pieChart from "./charts/pieChart";
export default {
  name: "equipmentoperation",
  components:{
    gaugeChart,
    barChart,
    linebarChart,
    pieChart
  },
  data(){
    return {
      colorList:['#6698FF','#1F45FC','#82CAFF','#43BFC7','#C36241'],
      target_type:'',
      useStatus:false,
      usebeStatus:false,
      recipientStatus:false,
      recipientbeStatus:false,
      inventoryStatus:false,
      inventorybeStatus:false,
      inventoryelStatus:false,
      useelStatus:false,
      recipientelStatus:false,
      treeValue:[],
      equipment:'',
      typeListinfo:[
        {id:1,title:'第1类',content:'AV',fillStaus:false,leftBorder:true,topBorder:true,backColor:'#F62217'},
        {id:2,title:'第1类',content:'BV',fillStaus:false,topBorder:true,backColor:'#F62217'},
        {id:3,title:'CV类',content:'CV',fillStaus:false,topBorder:true,backColor:'#D4A017'},
        {id:4,title:'第1类',content:'AE',fillStaus:false,leftBorder:true,backColor:'#F62217'},
        {id:5,title:'第1类',content:'BE',fillStaus:false,backColor:'#F62217'},
        {id:6,title:'第2类',content:'CE',fillStaus:false,backColor:'#FDD017'},
        {id:7,title:'AD类',content:'AD',fillStaus:false,leftBorder:true,botBorder:true,backColor:'#4EE2EC'},
        {id:8,title:'第2类',content:'BD',fillStaus:false,botBorder:true,backColor:'#FDD017'},
        {id:9,title:'第2类',content:'CD',fillStaus:false,botBorder:true,backColor:'#FDD017'},
      ],
      numberState:[],
      backupState:[],
      backupName:[],
      goodTypeState:[],
      goodTypeName:[],
      factoryState:[]
    }
  },
  mounted() {
    this.getChartsList()
  },
  methods:{
    getChartsList(sparePartsAbc,sparePartsVed){
      this.getNumberstate(sparePartsAbc,sparePartsVed)
      this.getBackstate(sparePartsAbc,sparePartsVed)
      this.getGoodstype(sparePartsAbc,sparePartsVed)
      this.getFactoryState(sparePartsAbc,sparePartsVed)
    },
    typeinfoClick(val){
      this.target_type = ''
      const flag = !val.fillStaus
      this.typeListinfo.forEach(item=>{
        this.$set(item,'fillStaus',false)
      })
      this.$set(val,'fillStaus',flag)
      if (val.content && val.fillStaus){
        this.target_type = val.content
        this.getChartsList(val.content.charAt(0),val.content.charAt(1))
      }else {
        this.getChartsList()
      }
    },
    // 设备状态比
    getFactoryState(sparePartsAbc,sparePartsVed){
      this.factoryState = []
      this.axios({
        method:'POST',
        url: '/dms/dmsBackupReport/backupFactoryCountReport',
        data:{
          sparePartsAbc,
          sparePartsVed
        }
      }).then(res=>{
        if (res.data && res.data.length){
          this.factoryState = res.data
        }
      })
    },
    //物品分类
    getGoodstype(sparePartsAbc,sparePartsVed){
      this.goodTypeState = []
      this.axios({
        method:'POST',
        url: '/dms/dmsBackupReport/backupGoodsTypeCountReport',
        data:{
          sparePartsAbc,
          sparePartsVed
        }
      }).then(res=>{
        if (res.data && res.data.length){
          res.data.forEach(val=>{
             if (val.goodsType){
               switch (val.goodsType) {
                case 1:
                  val.goodsTypeName = `${ this.$t('spareParts.mechanical') }`
                       break;
                 case 2:
                   val.goodsTypeName =`${ this.$t('spareParts.Pneumatic') }`
                   break;
                 case 3:
                   val.goodsTypeName =`${ this.$t('spareParts.Electrical') }`
                   break;
               }
             }
          })
          this.goodTypeName = res.data.map(item => item.goodsType)
          this.goodTypeState = res.data
        }
      })
    },
    //仓库统计
    getBackstate(sparePartsAbc,sparePartsVed){
      this.backupState = []
      this.axios({
        method:'POST',
        url: '/dms/dmsBackupReport/everyBackupCountReport',
        data:{
          sparePartsAbc,
          sparePartsVed
        }
      }).then(res=>{
        if (res.data && res.data.length){
             //this.backupName = res.data.map(item => item.backupName + '仓库')
             // this.backupName = res.data.map(item => item.backupName +  `${ this.$t('spareParts.Warehouse') }`)
             this.backupName = res.data.map(item => item.backupName)
             this.backupState = res.data
        }
      })
    },
    //数量统计
    getNumberstate(sparePartsAbc,sparePartsVed){
      this.numberState = []
      this.axios({
        method:'POST',
        url: '/dms/dmsBackupReport/backupCountReport',
        data:{
          sparePartsAbc,
          sparePartsVed
        }
      }).then(res=>{
        if (res.code === 200){
          const arr= [res.data]
          if (arr && arr.length){
            this.numberState = [res.data]
            this.numberState.forEach(val=>{
              if (val.totalCount === null){
                  val.totalCount = 0
              }
              if (val.useCount === null){
                  val.useCount = 0
              }
              if (val.scrapCount === null){
                  val.scrapCount = 0
              }
            })
          }else {
            this.numberState = [{
              totalCount:67,
              useCount:35,
              scrapCount:85
            }]
          }
        }else {
          this.numberState = [23, 67, 56]
        }
      })
    },
    btnClick(str){
      switch (str) {
         case '库存数量':
          this.inventoryStatus = !this.inventoryStatus
          this.$refs.gaugeChart.selectClick(str,this.inventoryStatus)
          break;
         case '使用数量':
          this.useStatus = !this.useStatus
          this.$refs.gaugeChart.selectClick(str,this.useStatus)
          break;
        case '报废数量':
          this.recipientStatus = !this.recipientStatus
          this.$refs.gaugeChart.selectClick(str,this.recipientStatus)
          break;
        case 'CMX仓库':
          this.inventorybeStatus = !this.inventorybeStatus
          this.$refs.barChart.selectClick(str,this.inventorybeStatus)
          break;
        case 'CEP仓库':
          this.usebeStatus = !this.usebeStatus
          this.$refs.barChart.selectClick(str,this.usebeStatus)
          break;
        case 'CCA仓库':
          this.recipientbeStatus = !this.recipientbeStatus
          this.$refs.barChart.selectClick(str,this.recipientbeStatus)
          break;
        case '电气类':
          this.inventoryelStatus = !this.inventoryelStatus
          this.$refs.linebarChart.selectClick(str,this.inventoryelStatus)
          break;
        case '机械类':
          this.useelStatus = !this.useelStatus
          this.$refs.linebarChart.selectClick(str,this.useelStatus)
          break;
        case '气动类':
          this.recipientelStatus = !this.recipientelStatus
          this.$refs.linebarChart.selectClick(str,this.recipientelStatus)
          break;
      }
    },
    equipmentChange(value){
      this.equipment =  value
    },
    getHierarchyByMachining(arr){
      arr.forEach((item) => {
        item['value'] = item.id;
        item['label'] = item.name;
        if (item.children.length >0){
          this.getHierarchyByMachining(item.children)
        }
      })
      return arr;
    },
    getEquipmentValue(device){
      this.axios({
        method: 'get',
        url: '/dms/dmsDevice/getDeviceDetail',
        params:{
          deviceMIdOrNo:device,
        }
      }).then(res => {
        if(res.code == 200){
          this.equipmentList =res.data;
        }
      })
    },
  }
}
</script>


<style lang="scss" scoped>
.operation_box{
  margin-right: 0;
  .content_box{
      margin-top: 15px;
    padding: 0 5px;
    .chartWrapper{
      width: 100%;
      padding: 0 5px;
      margin-bottom: 10px;
      border-radius: 8px;
      .waperRowLeft{
        position: relative;
        background-color: #fff;
        height: auto;
        border-radius: 0 0 8px 8px;
        .typeBoxContent{
          padding: 8px;
          margin-top: 35px;
          .content_itemBox{
            padding: 5px;
            .content_item{
              display: flex;
              //margin-bottom: 5px;
              flex-direction: column;
              border-radius: 5px;
              background-color: #f4f9fd;
              padding: 5px 5px;
              .content_item_text{
                span{
                  display: block;
                  width: 100%;
                  height: 120px;
                  font-size: 14px;
                  padding: 5px;
                }
              }
              .content_item_title{
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 5px;
                .title_top{font-size: 18px; font-weight: 600}
                .colorBox{width: 35px; height: 13px;
                  border-radius: 2px;}
              }
            }
          }
        }
        .typeBox{
          position: relative;
          padding: 40px 20px 55px 40px;
          .box_left_title,.box_bot_title{
            font-weight: 500;
            font-size: 17px;
            color: #999;
            position: absolute;
          }
          .box_left_title{
            top: 10px;
            left: 10px;
          }
          .box_bot_title{
            bottom: 0;
            right: 10px;
          }
          .box_bot,.box_left{
            font-weight: 600;
            font-size: 18px;
            color: #999;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: space-around;
          }
          .box_bot{
            width: 100%;
            padding: 0 20px 0 25px;
            bottom: 20px;
            left: 10px;
          }
          .box_left{
            height: 100%;
            flex-direction: column;
            padding: 40px 12px 35px 5px;
            top: 0;
            left: 10px;
          }
          .topBorder{
            border-top: none !important;
          }
          .leftBorder{
            border-left: 2px solid #848482;
          }
          .botBorder{
            border-bottom: 2px solid #848482;
          }
          .type_item_col{display: flex;justify-content: center;align-items: center;
            padding: 8px;
            height: 120px;
            //border-left: 1px solid #848482;
            border-right: 1px solid #848482;
            border-top: 1px solid #848482;
            .type_item_fill:hover{
              transform: scale(1.1);
              transition: 1s;
            }
            .type_item_fill{
              width: 100%;height: 100%;cursor: pointer;
              font-size: 16px;
              font-weight: 600;
              color: #fff;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          .type_item{
            width: 100%;height: 100%;cursor: pointer;
            display: flex;
            flex-direction: column;
            //justify-content: center;
            align-items: center;
            .type_item_title,.content{
              width: 100%;
              display: flex;
              align-items: center;
              font-size: 16px;
              justify-content: center;
            }
            .type_item_title{
              height: 25px;
              color: #fff;
            }
            .content{
              font-weight: 600;
              height: calc(100% - 25px);
            }
          }

          }
        }
      }
      .waperRow{
        position: relative;
        background-color: #fff;
        height: 400px;
        border-radius: 0 0 8px 8px;
      }
      .tip {
        border-radius: 8px 8px 0 0;
        font-size: 16px;
        color: #00142D;
        background-color: #f8f8f8;
        //border: solid 1px #d6dbdf;
        padding-left: 16px;
        position: relative;
        height: 40px;
        line-height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: bold;
        .tip_top{
          font-size: 15px;
          font-weight: 700;
          color: #000000;
        }
        .title_tip{
          //display: flex;
          //justify-content: flex-start;
          display: block;
          white-space: nowrap;
          width: 400px;
          text-align: right;
          //overflow: hidden;
          overflow-x: auto;
          overflow-scrolling: touch;
          .title_tip_top{
            display: inline-block;
            margin-right: 8px;
            //display: flex;
            //justify-content: flex-start;
            //align-items: center;
            .colorBox{width: 20px; height: 13px;
              border-radius: 2px;display: inline-block; margin-right: 2px;}
          }
          padding: 0 10px;
          span{cursor: pointer; color: #000000;}
          span.grayBtn{color: gray;}
        }
        em {
          font-size: 16px;
          color: #777777;
        }
        span {
          //font-size: 14px;
          //color: #999999;
        }
        //&:before {
        //  content: "";
        //  position: absolute;
        //  width: 7px;
        //  height: 20px;
        //  border-left: 1px dashed #187bdb;
        //  border-right: 1px dashed #187bdb;
        //  top: 9px;
        //  left: 12px;
        //}
      }
    }
  }
  .title{
    height: 45px;
    background-color: #ffffff;
    line-height: 45px;
    margin-top: 16px;
    box-shadow: 0 0 5px 0 rgba(51, 51, 51, 0.1);
    border-radius: 3px;
    margin-bottom: 10px;
    overflow: hidden;
    span{
      margin-left: 10px;
      font-weight: 500;
      vertical-align: middle;
      font-size: 16px;
      color: #333333;
    }
  }
}
</style>
